<template>
	<!-- 商品信息 -->
	<view v-if="list.goods_name">
		<view class="banner">
			<swiper circular="true" indicator-dots="true" :autoplay="true" :interval="5000" :duration="1000">
				<swiper-item v-for="(item,index) in list.pics" :key="index">
					<view class="swiper-item">
						<u-image @click="preview(index)" lazy-load fade class="img" height="400" mode="aspectFit"
							:src="item.pics_mid_url">
						</u-image>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<view class="box">
			<!-- 商品信息 -->
			<view class="message">
				<view class="msg-left">
					<text>￥{{list.goods_price}}</text>
					<br>
					{{list.goods_name}}
				</view>
				<view class="msg-right">
					<u-icon name="heart" size="50" color="#999"></u-icon>
					<text>收藏</text>
				</view>
			</view>
			<u-divider>详情</u-divider>
			<!-- 富文本 -->
			<view class="rich">
				<rich-text :nodes="list.goods_introduce"></rich-text>
			</view>
		</view>
		<!-- 底部加入购物车栏 -->
		<view>
			<view class="footer">
				<uni-goods-nav :fill="true" :options="options" :buttonGroup="buttonGroup" @click="onClick"
					@buttonClick="buttonClick" />
			</view>
		</view>
	</view>
</template>

<script>
	import http from '../../utils/http.js'
	import {
		mapState,
		mapMutations,
		mapGetters
	} from 'vuex'
	import uniGoodsNav from '@/uni_modules/uni-goods-nav/components/uni-goods-nav/uni-goods-nav'
	export default {
		components: {
			uniGoodsNav
		},
		data() {
			return {
				list: '',
				options: [{
						icon: 'headphones',
						text: '客服'
					},
					{
						icon: 'cart',
						text: '购物车',
						info: 2
					}
				],
				buttonGroup: [{
						text: '加入购物车',
						backgroundColor: '#ff0000',
						color: '#fff'
					},
					{
						text: '立即购买',
						backgroundColor: '#ffa200',
						color: '#fff'
					}
				]
			}
		},
		methods: {
			...mapMutations('cart', ['addCart']),
			async getmessage(id) {
				const {
					data: res
				} = await http.get(`/api/public/v1/goods/detail?goods_id=${id}`)
				if (res.meta.status !== 200) return uni.$showMsg()
				this.list = res.message
			},
			// 实现轮播图的预览效果
			preview(i) {
				// 调用 uni.previewImage() 方法预览图片
				uni.previewImage({
					// 预览时，默认显示图片的索引
					current: i,
					// 所有图片 url 地址的数组
					urls: this.list.pics.map(x => x.pics_big)
				})
			},
			// 客服
			onClick(e) {
				if (e.index == 0) {
					uni.showToast({
						title: '客服忙',
						icon: "loading"
					})
				}
				if (e.index == 1) {
					uni.switchTab({
						url:'/pages/cart/cart'
					})
				}
			},
			// 加入购物 立即购买
			buttonClick(e) {
				if (e.index == 0) {
					const goods = {
						goods_id: this.list.goods_id, // 商品的Id
						goods_name: this.list.goods_name, // 商品的名称
						goods_price: this.list.goods_price, // 商品的价格
						goods_count: 1, // 商品的数量
						goods_small_logo: this.list.goods_small_logo, // 商品的图片
						goods_state: true ,// 商品的勾选状态
						goods_show:false
					}
					this.addCart(goods)
					uni.showToast({
						title:'加入成功',
					})
				} else {
					uni.showToast({
						title: '立即购买',
						icon: "loading"
					})
				}
			},
		
		},
		onLoad(option) {
			this.getmessage(option.id)
		},
		computed: {
			...mapState('cart', ['cart']),
			...mapGetters('cart', ['total']),
		},
		watch: {
			// 1. 监听 total 值的变化，通过第一个形参得到变化后的新值
			total: {
				// handler 属性用来定义侦听器的 function 处理函数
				handler(newVal) {
					const findResult = this.options.find(x => x.text === '购物车')
					if (findResult) {
						findResult.info = newVal
					}
				},
				// immediate 属性用来声明此侦听器，是否在页面初次加载完毕后立即调用
				immediate: true
			}
		},
	
	}
</script>

<style scoped lang="scss">
	.footer {
		// 为商品导航组件添加固定定位
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
	}

	swiper {
		height: 222px;
	}

	.message {
		background-color: #F0F0F0;
		border-radius: 10upx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 10px 10upx;

		.msg-left {
			width: 620upx;
			font-size: 24upx;
			overflow: hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 3;
			border-right: 1px solid #dadada;
			padding-right: 10px;
				text {
				color: #EB4450;
				font-size: 20px;
			}
		}

		.msg-right {
			display: flex;
			flex-direction: column;
			align-items: center;
			margin-right: 20upx;
			text{
				
			}
		}

	}

	.box {
		width: 98%;
		margin: 0 auto;
		padding-bottom: 50px;
	}
</style>
